Ext.onReady(function() {
	var data = {
		images: [
			{name: '基本原理', url: 'http://www.maniacworld.com/Animal_Fights.jpg',size: 90.5,lastmod: '2011-01-01'},
			{name: '基本原理', url: 'http://www.maniacworld.com/Animal_Fights.jpg',size: 90.5,lastmod: '2011-01-01'},
			{name: '基本原理', url: 'http://www.maniacworld.com/Animal_Fights.jpg',size: 90.5,lastmod: '2011-01-01'},
			{name: '基本原理', url: 'http://www.maniacworld.com/Animal_Fights.jpg',size: 90.5,lastmod: '2011-01-01'},
			{name: '基本原理', url: 'http://www.maniacworld.com/Animal_Fights.jpg',size: 90.5,lastmod: '2011-01-01'},
			{name: '基本原理', url: 'http://www.maniacworld.com/Animal_Fights.jpg',size: 90.5,lastmod: '2011-01-01'}
		]
	};
	
	var store = new Ext.data.JsonStore({
	    data: data,
	    root: 'images',
	    fields: [
	        'name', 'url',
	        {name:'size', type: 'float'},
	        {name:'lastmod', type:'date', dateFormat:'timestamp'}
	    ]
	});
	
	 var tpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
		    '<div class="thumb"><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
	);
	
	
	function showMsg(e) {
		if(this.layerList) this.layerList.remove();
		
		this.layerList = new Ext.Layer({  
            shadow : false,
            cls : 'x-combo-list',  
            constrain : false  
        }); 
        
       var msgPanel = new Ext.Panel({
       		width: 500,
       		height: 300,
       		title:'提示：双击此处可关闭',
       		items: [
	       		{
	       			xtype:'htmleditor',
		            id:'bio',
		            fieldLabel:'Biography',
		            height:250,
		            anchor:'98%'
       			}
       		]
       });
        
       msgPanel.render(layerList);
       this.layerList.setXY(e.getXY())
       this.layerList.show();
       this.layerList.on('dblclick', function() {this.layerList.hide();},this);
	}
	
	var panel = new Ext.Panel({
	    id:'images-view',
	    frame:true,
	    width:535,
	    autoHeight:true,
	    collapsible:true,
	    layout:'fit',
	    title:'Simple DataView',
	
	    items: new Ext.DataView({
	       store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            },
            listeners: {
            	selectionchange: {
            		fn: function(dv,nodes){
            			var l = nodes.length;
            			var s = l != 1 ? 's' : '';
            			panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
            		}
            	},
            	
            	dblclick: function(a, b, c, e) {
            		showMsg(e);
            	}
            }
	    })
	});
	panel.render(document.body);
	
});